<template>
  <div class="mod-config">
    <el-container style="height: 700px; border: 1px solid #E0E0E0">
      <el-aside width="250px" style="border-right: 1px solid #E0E0E0;">
        <div class="goods-cat">
          <div class="title-div">
            <i class="el-icon-menu"></i>
            商品分类
          </div>
          <div class="button-div">
            <el-button type="primary" size="mini" @click="goodsCatAddHandle()">新增</el-button>
            <el-button type="primary" size="mini" @click="goodsCatUpdateHandle()">修改</el-button>
            <el-button type="primary" size="mini" @click="deleteGoodsCat()">删除</el-button>
          </div>
          <div class="button-div">
            <el-button type="primary" size="mini" @click="clearGoodsCat()">全部</el-button>
          </div>
          <el-tree ref="goodsCatTree" class="goods-cat-tree"
            :data="goodsCats"
            node-key="id"
            :props="goodsCatsTreeProps"
            :default-expand-all="false"
            :expand-on-click-node="false"
            :check-strictly="true"
            show-checkbox
            @node-click="handleGoodsCatClick"
            @check-change="goodsCatCheckChange"
            @check="goodsCatCheck"
          >
            <span class="custom-tree-node" slot-scope="{ node, data }">
              <span>{{ node.label }}</span>
              <span>

              </span>
            </span>
          </el-tree>
        </div>
      </el-aside>

      <el-container>
        <el-header style="text-align: right; font-size: 12px">
          <el-select v-model="dataForm.companyId" placeholder="请选择公司" @change="companyChange">
            <el-option v-for="item in companys" :key="item.id" :label="item.companyName" :value="item.id">
            </el-option>
          </el-select>
        </el-header>

        <el-main>
          <GoodsList ref="goodsList"
            :companyId="dataForm.companyId"
            :goodsCats="goodsCats"
            :goodsCatId="dataForm.goodsCatId"
          ></GoodsList>
        </el-main>
      </el-container>
    </el-container>
    <!-- 商品分类新增修改弹窗 -->
    <GoodsCatAddOrUpdate v-if="goodsCatAddOrUpdateVisible" ref="goodsCatAddOrUpdate"
      @refreshDataList="getGoodsCats()"
      :companyId="dataForm.companyId"
    ></GoodsCatAddOrUpdate>
  </div>
</template>

<script>
  import {
    getCompanys,treeDataTranslate
  } from '@/utils'
  import GoodsCatAddOrUpdate from './goodsCat/goodsCat-add-or-update'
  import GoodsList from './goods/goods-list'
  export default {
    data() {
      return {
        goodsCatAddOrUpdateVisible: false,
        dataForm: {
          companyId: null,
          goodsCatId: null
        },
        // 公司
        companys: [],
        // 商品类目
        goodsCats: [],
        goodsCatsTreeProps: {
          label: 'catName',
          children: 'children'
        },
        goodsList: [],
      }
    },
    components: {
      GoodsCatAddOrUpdate,GoodsList
    },
    activated() {
      getCompanys(res => {
        this.companys = res
        if (this.companys.length > 0) {
          this.dataForm.companyId = this.companys[0].id
          this.getGoodsCats()
          this.$nextTick(() => {
            this.$refs.goodsList.init()
          })
        }
      });
    },
    methods: {
      // 公司选择change事件
      companyChange(companyId){
        this.dataForm.companyId = companyId
        this.dataForm.goodsCatId = null
        this.getGoodsCats()
        this.$nextTick(() => {
          this.$refs.goodsList.init()
        })
      },
      // 获取商品类目
      getGoodsCats() {
        this.goodsCats = []
        if (this.dataForm.companyId == null) {
          return
        }
        this.$http({
          url: this.$http.adornUrl('/merchant/goodsCat/getByCompany'),
          method: 'get',
          params: this.$http.adornParams({
            companyId: this.dataForm.companyId
          })
        }).then(({
          data
        }) => {
          if (data && data.code === 0) {
            // data.data.push({
            //   catName: '全部',
            //   id: 0
            // });
            this.goodsCats = treeDataTranslate(data.data);
            if(this.dataForm.goodsCatId == null){
              this.$refs.goodsCatTree.setCheckedKeys([])
            }
          }
        })
      },
      // 商品分类选中事件
      handleGoodsCatClick(item, node, self) {
        this.dataForm.goodsCatId = item.id
        this.$refs.goodsCatTree.setCheckedKeys([item.id])
        this.$nextTick(() => {
          this.$refs.goodsList.getDataList();
        });
        // if(item.id == this.dataForm.goodsCatId){
        //   this.dataForm.goodsCatId = null;
        //   this.$refs.goodsCatTree.setCheckedKeys([])
        // } else {
        //   this.dataForm.goodsCatId = item.id
        //   this.$refs.goodsCatTree.setCheckedKeys([item.id])
        // }
        // this.$nextTick(() => {
        //   this.$refs.goodsList.getDataList();
        // });
        
      },
      // 商品分类值改变事件
      goodsCatCheckChange(item, node, self) {
        if (node == true) {
          this.dataForm.goodsCatId = item.id
          this.$refs.goodsCatTree.setCheckedKeys([item.id])
        } else {
          if (this.dataForm.goodsCatId == item.id) {
            this.$refs.goodsCatTree.setCheckedKeys([item.id])
          }
        }
      },
      // 商品分类复选框被点击的时候触发
      goodsCatCheck(item, tree){
        this.dataForm.goodsCatId = item.id
        this.$refs.goodsCatTree.setCheckedKeys([item.id])
        this.$nextTick(() => {
          this.$refs.goodsList.getDataList();
        });
      },
      clearGoodsCat(){
        this.dataForm.goodsCatId = null
        this.$refs.goodsCatTree.setCheckedKeys([])
        this.$nextTick(() => {
          this.$refs.goodsList.getDataList();
        });
      },
      // 商品分类新增事件
      goodsCatAddHandle(){
        this.goodsCatAddOrUpdateVisible = true
        this.$nextTick(() => {
          this.$refs.goodsCatAddOrUpdate.init()
        });
      },
      goodsCatUpdateHandle(){
        if(this.dataForm.goodsCatId == null){
          this.$message.error("请选择要修改的商品分类")
          return
        }
        this.goodsCatAddOrUpdateVisible = true
        this.$nextTick(() => {
          this.$refs.goodsCatAddOrUpdate.init(this.dataForm.goodsCatId)
        });
      },
      // 删除
      deleteGoodsCat() {
        if(this.dataForm.goodsCatId == null){
          this.$message.error("请选择要删除的商品分类")
          return
        }
        var ids = [this.dataForm.goodsCatId];
        this.$confirm('真的要删除该商品分类么?删除商品分类会删除所有的子分类及分类下的商品', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http({
            url: this.$http.adornUrl('/merchant/goodsCat/delete'),
            method: 'post',
            data: this.$http.adornData(ids, false)
          }).then(({
            data
          }) => {
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.getGoodsCats()
                  this.dataForm.goodsCatId = null
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        })
      },
    }
  }
</script>

<style scoped>
  .goods-cat .title-div {
    border-bottom: 1px solid #E0E0E0;
    padding: 10px 0 10px 5px;
    background-color: #eee;
    font-size: 18px;
  }

  .goods-cat .button-div {
    border-bottom: 1px solid #E0E0E0;
    padding: 5px 0 5px 0;
    text-align: center;
  }

  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 15px;
    padding-right: 8px;
  }

  .goods-cat-tree >>> .el-tree-node {
    border-bottom: 1px dashed #E0E0E0;
    padding: 5px 0;
  }

  .goods-cat-tree >>> .el-tree-node__children .el-tree-node {
    border-bottom: none;
    padding: 0;
  }

  .goods-cat-tree >>> .el-tree-node__expand-icon {
    font-size: 30px !important;
  }

</style>
